<template>
  <div id="app">
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
        <el-menu-item  v-for="(item,index) in shuju" :index="item.in" :key="index">
          <router-link :to="{name:item.name,params:{'id':item.id}}" :key="index">{{item.cont}}</router-link>
        </el-menu-item>
    </el-menu>
    <router-view/>
    <!--<router-link v-for="(item,index) in shuju" :to="{name:item.name,params:{'id':item.id}}" :key="index">{{item.cont}}</router-link>-->
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return{
      activeIndex:'1',
      shuju:[
        {
          name:'index',
          id:11,
          cont:"首页",
          in:'1'
        },
        {
          name:'vegetables',
          id:22,
          cont:'蔬菜',
          in:'2'
        },
        {
          name:'fruit',
          id:33,
          cont:"水果",
          in:'3'
        },
        {
          name:'drink',
          id:44,
          cont:"酒水",
          in:'4'
        },
        {
          name:'surround',
          id:55,
          cont:"周边推荐",
          in:'5'
        },
      ]
    }
  },
  mounted(){
    // alert(this.shuju)
    if(this.$route.params.id){
      switch  (this.$route.params.id){
        case '11':
          this.activeIndex = '1';
          break;
        case '22':
          this.activeIndex = '2';
          break;
        case '33':
          this.activeIndex = '3';
          break;
        case '44':
          this.activeIndex = '4';
          break;
        case '55':
          this.activeIndex = '5';
          break;
      }
      console.log(this.activeIndex)
      console.log(this.$route.params.id)
    }
  }
}
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
  .el-carousel{
    background: #2B2F3B;
  }
  .el-carousel__arrow{
    background: rgba(0,0,0,.6);
  }
  .el-menu-item{
    padding:0;
  }
  .el-menu-item a{
    display: block;
    width:100%;
    padding-right:20px;
  }
</style>
